<template>
    <div class="song-list">
        <div class="result">
            <h3>
                搜索{{keywords}},找到{{playlistCount}}个歌单
            </h3>
        </div>
        <SongList :playlists="playlists"/>
        <div class="pageinatin">
                <!-- @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" -->
            <el-pagination
                :current-page="currentPage"
                :hide-on-single-page="true"
                :page-sizes="[30, 50, 100]"
                :page-size="pageSize"
                layout="prev, pager, next, jumper,total,sizes"
                :total="playlistCount">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import SongList from "@/components/content/songlist/SongList.vue";
export default {
    name: "",
    components: { SongList },
    data() {
        return {
            keywords: "",
            // 当前页数
            currentPage: 1,
            // 每一页展示的数据
            pageSize: 30,
            // 总条数
            playlistCount: 0,
            // 歌单数据
            playlists: []
        };
    },
    created() {
        this.keywords = this.$route.params.keywords;
        // 获取歌单信息
        this.getSearchSongListBy();
    },
    methods: {
        async getSearchSongListBy() {
            let offset = (this.currentPage - 1) * this.pageSize;
            let resPlayList = await this.$API.searchdetail.getSearchSongList(this.keywords, offset, this.pageSize);
            if (resPlayList.code == 200) {
                this.playlistCount = resPlayList.result.playlistCount;
                this.playlists = resPlayList.result.playlists;
            }
        }
    },
  
}
</script>
<style lang="less" scoped>
    .song-list{
        h3{
            margin: 10px 10px;
        }
        .pageinatin{
            text-align: center;
        }
    }
</style>